﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayuiLayout.cshtml";
}
@using System.Text;

<!-- 标题区块 -->
<blockquote class="layui-elem-quote">
    <div class="pos-r h-38" id="topbar">
        <span>
            @{
                bool isHasRow; // 是否有行操作
            }
            @*@Html.SysMenuButton(MenuPosType.行列, out isHasRow)*@
            @(Html.SysMenuButton(MenuPosType.行列, out isHasRow, rowFunc: p =>
        {
            var strbHtml = new StringBuilder();
            strbHtml.AppendLine("<div class=\"layui-btn-group\">");
            foreach (var item in p)
            {
                if (item.MenuName == "支付")
                {
                    strbHtml.AppendLine("{{# if(d.Status == \"10\") { }}");
                    strbHtml.AppendLine(string.Format(
                       "<button type=\"button\" title=\"{0}\" class=\"layui-btn layui-btn-sm {1}\" lay-event=\"{2}\"><i class=\"layui-icon\">{3}</i>{4}</button>",
                       item.MenuName, item.MenuCss, string.IsNullOrWhiteSpace(item.MenuAction) ? item.MenuMethod : item.MenuAction, item.MenuIcon, ""));
                    strbHtml.AppendLine("{{# } }}");
                }
                else if (item.MenuName == "确认")
                {
                    strbHtml.AppendLine("{{# if(d.Status == \"20\") { }}");
                    strbHtml.AppendLine(string.Format(
                       "<button type=\"button\" title=\"{0}\" class=\"layui-btn layui-btn-sm {1}\" lay-event=\"{2}\"><i class=\"layui-icon\">{3}</i>{4}</button>",
                       item.MenuName, item.MenuCss, string.IsNullOrWhiteSpace(item.MenuAction) ? item.MenuMethod : item.MenuAction, item.MenuIcon, ""));
                    strbHtml.AppendLine("{{# } }}");
                }
                else if(item.MenuName == "发货")
                    {
                    strbHtml.AppendLine("{{# if(d.Status == \"30\") { }}");
                    strbHtml.AppendLine(string.Format(
                       "<button type=\"button\" title=\"{0}\" class=\"layui-btn layui-btn-sm {1}\" lay-event=\"{2}\"><i class=\"layui-icon\">{3}</i>{4}</button>",
                       item.MenuName, item.MenuCss, string.IsNullOrWhiteSpace(item.MenuAction) ? item.MenuMethod : item.MenuAction, item.MenuIcon, ""));
                    strbHtml.AppendLine("{{# } }}");
                }
                else if (item.MenuName == "取消")
                {
                    strbHtml.AppendLine("{{# if(d.Status != \"90\") { }}");
                    strbHtml.AppendLine(string.Format(
                       "<button type=\"button\" title=\"{0}\" class=\"layui-btn layui-btn-sm {1}\" lay-event=\"{2}\"><i class=\"layui-icon\">{3}</i>{4}</button>",
                       item.MenuName, item.MenuCss, string.IsNullOrWhiteSpace(item.MenuAction) ? item.MenuMethod : item.MenuAction, item.MenuIcon, ""));
                    strbHtml.AppendLine("{{# } }}");
                }
                else
                {
                    strbHtml.AppendLine(string.Format(
                        "<button type=\"button\" title=\"{0}\" class=\"layui-btn layui-btn-sm {1}\" lay-event=\"{2}\"><i class=\"layui-icon\">{3}</i>{4}</button>",
                        item.MenuName, item.MenuCss, string.IsNullOrWhiteSpace(item.MenuAction) ? item.MenuMethod : item.MenuAction, item.MenuIcon, ""));
                }
            }
            strbHtml.AppendLine("</div>");
            return strbHtml.ToString();
        }))
        </span>
        <span class="pos-a pos-right">
            <span class="layui-inline">
                <button type="button" class="layui-btn" data-type="Search"><i class="layui-icon">&#xe615;</i>搜索</button>
            </span>
            <span class="layui-inline">
                <button type="button" class="layui-btn" data-type="Reload"><i class="layui-icon">&#xe669;</i>刷新</button>
            </span>
        </span>
    </div>
</blockquote>

<!-- 数据表格 -->
<table class="layui-table" lay-filter="tbList" lay-data="{id:'tbList',url:'@Url.Action("GetListPage", "Order")', page:true, method:'post',height:'full-128'}">
    <thead>
        <tr>
            <th lay-data="{type:'checkbox', width: 50, fixed:'left'}"></th>
            <th lay-data="{field:'MemberUserName', width: 150, align:'center', sort: true}">用户名</th>
            <th lay-data="{field:'MemberRealName', width: 150, align:'center', sort: true}">用户姓名</th>
            <th lay-data="{field:'Code',minWidth: 220, align:'center', sort: true}">订单编号</th>
            <th lay-data="{field:'Status', width: 150, align:'center', sort: true, templet: '#buttonStatus'}">状态</th>
            <th lay-data="{field:'TotalAmount', width: 160, align:'center', sort: true}">总金额</th>
            <th lay-data="{field:'OrderTime', minWidth: 160, align:'center', sort: true}">下单时间</th>
            <th lay-data="{field:'LogisticsCompany', width: 160, align:'center', sort: true}">物流公司</th>
            <th lay-data="{field:'LogisticsNumber', minWidth: 160, align:'center', sort: true}">物流单号</th>
            @if (isHasRow)
            {
                Write(new MvcHtmlString("<th lay-data=\"{fixed:'right', width: 240, align:'center', unresize:true, toolbar:'#barOperation'}\">操作</th>"));
            }
        </tr>
    </thead>
</table>

<!-- 搜索表单 -->
<div class="hidden" id="SearchTmpl">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="MemberUserName" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-block">
                <input type="text" name="MemberRealName" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-block">
                <input type="text" name="OrderCode" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="Status" lay-verify="">
                    <option value="" selected="">请选择</option>
                    <option value="10">待支付</option>
                    <option value="20">已支付</option>
                    <option value="30">待发货</option>
                    <option value="40">发货成功</option>
                    <option value="90">订单取消</option>
                </select>
                <div class="layui-form-select layui-form-selected">
                    <div class="layui-select-title">
                        <input type="text" placeholder="请选择" value="" readonly="" class="layui-input"><i class="layui-edge"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" @*data-type="Reload" *@ lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll();">关闭</button>
        </div>
    </form>
</div>

<!-- js代码-->
<script type="text/html" id="buttonStatus">
    {{#  if(d.Status==10){ }}
    <button class="layui-btn layui-btn-xs">待支付</button>
    {{#  } else if(d.Status==20){ }}
    <button class="layui-btn layui-btn-xs">已支付</button>
    {{#  } else if(d.Status==30){ }}
    <button class="layui-btn layui-btn-xs">待发货</button>
    {{#  } else if(d.Status==40){ }}
    <button class="layui-btn layui-btn-xs">发货成功</button>
    {{#  } else if(d.Status==90){ }}
    <button class="layui-btn layui-btn-xs">订单取消</button>
    {{#  } }}
</script>
@section scripts{
    <script>
        var $, layer;//这两个变量设置为当前页的全局变量
        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table, form = layui.form, laydate = layui.laydate;
            $ = layui.jquery;
            layer = layui.layer;

            //刷新(添加修改等子页面也需要用到)
            reload = function () {
                table.reload('tbList');
            }

            //设置标题区块的按钮的事件方法
            var active = {
                Reload: function () {//刷新按钮
                    reload();
                },
                Search: function () {
                    layer_show(1, "高级检索", $("#SearchTmpl"), '400px', "100%", "r");
                    form.render();//重新渲染表单
                    laydate.render({ elem: '#OrderTime', range: true });//执行laydate
                    laydate.render({ elem: '#ExpirationTime', range: true });//执行laydate
                },
                Add: function () {
                    layer_show('', '添加', '@Url.Action("AddOrEdit", "Order")', '100%', '100%');
                },
                Delete: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '删除')) {
                        layer.confirm('确认要删除吗?', function (index) {
                            $.post(
                                '@Url.Action("DeleteList", "Order")',
                                { IdList: GetIdList(data) },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }
                },
                //支付成功
                PaySuccess: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '确认')) {
                        layer.confirm('是否确认支付成功?', function (index) {
                            $.post('@Url.Action("PaySuccessList", "Order")',
                                { IdList: GetIdList(data) },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }
                },
                //确认支付
                ConfirmPay: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '确认')) {
                        layer.confirm('是否确认金额到账?', function (index) {
                            $.post('@Url.Action("ConfirmPayList", "Order")',
                                { IdList: GetIdList(data) },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }
                },
                //发货物流
                DeliverGoods: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '确认')) {
                        layer_show('', '发货物流', '@Url.Action("DeliverGoods", "Order")?IdList=' + GetIdList(data), '100%', '100%');
                    }
                },
                //取消订单
                Cancel: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '取消')) {
                        layer.confirm('是否取消订单?', function (index) {
                            $.post('@Url.Action("CancelList", "Order")',
                                { IdList: GetIdList(data) },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }
                }
            };

            //获取并拼接数据中id的值
            function GetIdList(data) {
                var IdList = "", douhao = "";
                for (var i = 0; i < data.length; i++) {
                    IdList += douhao + data[i].Id; douhao = ',';
                }
                return IdList;
            }

            //监听表头按钮点击
            $('#topbar .layui-btn').on('click', function () {
                //当按钮被单击时
                var type = $(this).data('type');//获取该按钮的type数据
                active[type] ? active[type].call(this) : '';//执行active中匹配type的方法
            });

            //监听排序
            table.on('sort(tbList)', function (obj) {
                table.reload('tbList', {
                    initSort: obj,
                    where: {
                        field: obj.field,
                        order: obj.type
                    }
                });
            });

            //监听表格 列工具条
            table.on('tool(tbList)', function (obj) {
                var data = obj.data;//获得当前行数据
                console.log(data);
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                switch (layEvent) {
                    case "Edit": { layer_show('', '修改', '@Url.Action("AddOrEdit", "Order")?Id=' + data.Id, '100%', '100%'); }; break;
                    case "Look": { layer_show('', '查看', '@Url.Action("Look", "Order")?Id=' + data.Id, '100%', '100%'); }; break;
                    case "Delete": {
                        layer.confirm('确认要删除吗?', function (index) {
                            $.post('@Url.Action("DeleteList", "Order")',
                                { IdList: data.Id },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }; break;
                    case "Record": { layer_show('', '记录', '@Url.Action("Record", "Order")?Id=' + data.Id, '100%', '100%'); }; break;
                    //支付成功
                    case "PaySuccess": {
                        layer.confirm('是否确认支付成功?', function (index) {
                            $.post('@Url.Action("PaySuccessList", "Order")',
                                { IdList: data.Id },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }; break;
                    //确认支付
                    case "ConfirmPay": {
                        layer.confirm('是否确认金额到账?', function (index) {
                            $.post('@Url.Action("ConfirmPayList", "Order")',
                                { IdList: data.Id },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }; break;
                    //发货物流
                    case "DeliverGoods": {
                        layer_show('', '发货物流', '@Url.Action("DeliverGoods", "Order")?IdList=' + data.Id, '100%', '100%');
                    };break;
                    //取消订单
                    case "Cancel": {
                        layer.confirm('是否取消订单?', function (index) {
                            $.post('@Url.Action("CancelList", "Order")',
                                { IdList: data.Id },
                                function (result) {
                                    layer.close(index);

                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    };break;
                    default: { }; break;
                }
            });

            //高级搜索提交按钮事件
            form.on('submit(search)', function (data) {
                //传入搜索参数并重新加载当前表格
                table.reload('tbList', {
                    where: data.field,
                    page: { curr: 1 /*重新从第 1 页开始*/ }
                });
                layer.closeAll();//关闭高级搜索框
                return false;
            });
        });
    </script>
}
